import { BorderBox13 } from "@jiaminghi/data-view-react";
import React, { useEffect, useState } from "react";
import { Request } from "@/services";
import AverageUserCategoryArrangement from "./components/AverageUserCategoryArrangement";
import DataCategoryDistribution from "./components/DataCategoryDistribution";
import TodayOfflineStoreTraffic from "./components/TodayOfflineStoreTraffic";

interface RightPaeConfigType {
  browseCategories: Record<string, any>;
  userIdentityCategory: Record<string, any>;
  offline: {
    feedback: any[];
    offlinePortal: Record<string, any>;
  };
}

const RightPage: React.FC = () => {
  const [config, setConfig] = useState<RightPaeConfigType>({
    browseCategories: {},
    userIdentityCategory: {},
    offline: {
      feedback: [],
      offlinePortal: {}
    }
  });

  const getConfig = async () => {
    try {
      const resp = await Request.post("/rightPageData");
      setConfig(resp.data);
    } catch (e) {
      setConfig({
        browseCategories: {},
        userIdentityCategory: {},
        offline: {
          feedback: [],
          offlinePortal: {}
        }
      });
    }
  };

  useEffect(() => {
    getConfig().finally();
  }, []);

  return (
    <div className="flex flex-col">
      {/* 关联数据类别分布 */}
      <div className="flex flex-col">
        <div className="flex items-center p-[10px]">
          <i className="iconfont text-[14px] mr-[10px] text-[#89e5ff] font-normal">&#xe7f7;</i>
          <span className="text-[16px] font-bold text-[#bcdcff]">关联数据类别分布</span>
        </div>
        <DataCategoryDistribution data={config.browseCategories} />
      </div>
      {/* 平均用户类别排布 */}
      <div className="flex flex-col mt-[20px]">
        <div className="flex items-center p-[10px]">
          <i className="iconfont text-[14px] mr-[10px] text-[#89e5ff] font-normal">&#xe7fd;</i>
          <span className="text-[16px] font-bold text-[#bcdcff]">平均用户类别排布</span>
        </div>
        <AverageUserCategoryArrangement data={config.userIdentityCategory} />
      </div>
      {/* 今日线下门店流量 */}
      <BorderBox13 style={{ width: "100%", height: "422px", marginTop: "20px", padding: "20px 15px" }}>
        <div className="w-full h-full bg-[rgba(19,25,47,.6)] rounded-[10px]">
          <div className="flex items-center p-[10px]">
            <i className="iconfont text-[14px] mr-[10px] text-[#89e5ff] font-normal">&#xe790;</i>
            <span className="text-[16px] font-bold text-[#bcdcff]">今日线下门店流量</span>
          </div>
          <TodayOfflineStoreTraffic data={config.offline} />
        </div>
      </BorderBox13>
    </div>
  );
};

export default RightPage;
